<template>
  <lay-config-provider :themeVariable="appStore.themeVariable" :theme="appStore.theme" :locales="locales"
    :locale="appStore.locale">
    <lay-layout :class="[ appStore.tab ? 'has-tab' : '', appStore.collapse ? 'collapse' : '', appStore.greyMode ? 'grey-mode' : '' ]">
      <!-- 遮盖层 -->
      <div v-if="!appStore.collapse" class="layui-layer-shade hidden-sm-and-up" @click="collapse"></div>
      <!-- 核心菜单  -->
      <lay-side :width="sideWidth" :class="appStore.sideTheme == 'dark' ? 'dark changeBgc' : 'light'">
        <lay-logo v-if="appStore.logo">
          <img v-if="appStore.collapse" src="/img/logo-wiwf.png" width="40" height="40" />
          <b v-if="! appStore.collapse">WiwfAdmin</b>
        </lay-logo>
        <div class="side-menu-wrapper">
          <div class="side-menu1" v-if="appStore.subfield && appStore.subfieldPosition == 'side'">
            <global-main-menu :collapse="true" :menus="mainMenus" :selectedKey="mainSelectedKey"
              @changeSelectedKey="changeMainSelectedKey"></global-main-menu>
          </div>
          <div class="side-menu2">
            <global-menu :collapse="appStore.collapse" :menus="menus" :openKeys="openKeys" :selectedKey="selectedKey"
              @changeOpenKeys="changeOpenKeys" @changeSelectedKey="changeSelectedKey"></global-menu>
          </div>
        </div>
      </lay-side>
      <lay-layout style="width: 0px">
        <!-- 布局头部 -->
        <lay-header style="display: flex">
          <lay-menu class="layui-layout-left">
            <lay-menu-item @click="collapse">
              <lay-icon v-if="appStore.collapse" type="layui-icon-spread-left"></lay-icon>
              <lay-icon v-else type="layui-icon-shrink-right"></lay-icon>
            </lay-menu-item>
            <lay-menu-item class="hidden-xs-only" @click="refresh">
              <lay-icon type="layui-icon-refresh-one"></lay-icon>
            </lay-menu-item>
            <lay-menu-item class="hidden-xs-only" v-if="appStore.breadcrumb" style="padding: 0px 15px">
              <GlobalBreadcrumb></GlobalBreadcrumb>
            </lay-menu-item>
          </lay-menu>
          <!-- 菜单分组 -->
          <lay-menu v-if="appStore.subfield && appStore.subfieldPosition == 'head'" class="layui-nav-center" :selectedKey="mainSelectedKey" @changeSelectedKey="changeMainSelectedKey">
            <template v-for="(menu, index) in mainMenus" :key="index">
              <lay-menu-item :id="menu.id" v-if="index < 4">
                <template #title>{{ menu.title }}</template>
              </lay-menu-item>
            </template>
          </lay-menu>
          <lay-dropdown v-if="appStore.subfield && appStore.subfieldPosition == 'head'" trigger="hover"
            placement="bottom">
            <lay-icon type="layui-icon-more" style="padding: 0px 15px"></lay-icon>
            <template #content>
              <lay-dropdown-menu>
                <template v-for="(menu, index) in mainMenus">
                  <lay-dropdown-menu-item :key="menu.id" v-if="index >= 4"
                    @click="changeMainSelectedKey(menu.id)">{{ menu.title }}</lay-dropdown-menu-item>
                </template>
              </lay-dropdown-menu>
            </template>
          </lay-dropdown>
          <lay-menu class="layui-layout-right">
            <lay-menu-item>
              <lay-fullscreen v-slot="{ toggle, isFullscreen }">
                <lay-icon @click="toggle()" :type="
                    isFullscreen
                      ? 'layui-icon-screen-restore'
                      : 'layui-icon-screen-full'
                  "></lay-icon>
              </lay-fullscreen>
            </lay-menu-item>
            <lay-menu-item>
              <global-message-tab :flag="flag">
                <lay-icon type="layui-icon-notice" @click="changeDropdown"></lay-icon>
              </global-message-tab>
            </lay-menu-item>
            <lay-menu-item>
              <lay-dropdown updateAtScroll placement="bottom">
                <lay-icon type="layui-icon-website"></lay-icon>
                <template #content>
                  <lay-dropdown-menu>
                    <lay-dropdown-menu-item @click="() => (appStore.locale = 'zh_CN')">
                      <template #default>中文</template>
                    </lay-dropdown-menu-item>
                    <lay-dropdown-menu-item @click="() => (appStore.locale = 'en_US')">
                      <template #default>英文</template>
                    </lay-dropdown-menu-item>
                  </lay-dropdown-menu>
                </template>
              </lay-dropdown>
            </lay-menu-item>
            <lay-menu-item>
              <lay-dropdown updateAtScroll placement="bottom">
                <lay-icon type="layui-icon-username"></lay-icon>
                <template #content>
                  <lay-dropdown-menu>
                    <lay-dropdown-menu-item @click="toUserInfo">
                      <template #default>用户信息</template>
                    </lay-dropdown-menu-item>
                    <lay-dropdown-menu-item @click="toSystemSet">
                      <template #default>系统设置</template>
                    </lay-dropdown-menu-item>
                    <lay-line></lay-line>
                    <lay-dropdown-menu-item @click="logOut">
                      <template #default>注销登录</template>
                    </lay-dropdown-menu-item>
                  </lay-dropdown-menu>
                </template>
              </lay-dropdown>
            </lay-menu-item>
            <lay-menu-item @click="changeVisible">
              <lay-icon type="layui-icon-more-vertical"></lay-icon>
            </lay-menu-item>
          </lay-menu>
        </lay-header>
        <lay-body>
          <global-tab :class="appStore.tagsTheme == 'concise' ? '' : appStore.tagsTheme == 'underpainting' ? 'underpainting' : 'designer' ">
          </global-tab>
          <global-content></global-content>
        </lay-body>
        <lay-footer></lay-footer>
      </lay-layout>
    </lay-layout>
    <global-setup v-model="visible"></global-setup>
  </lay-config-provider>
</template>

<script lang="ts">
  import { computed, onMounted, ref } from 'vue'
  import { useAppStore } from '../store/app'
  import { useUserStore } from '../store/user'
  import GlobalSetup from './global/GlobalSetup.vue'
  import GlobalContent from './global/GlobalContent.vue'
  import GlobalBreadcrumb from './global/GlobalBreadcrumb.vue'
  import GlobalTab from './global/GlobalTab.vue'
  import GlobalMenu from './global/GlobalMenu.vue'
  import GlobalMainMenu from './global/GlobalMainMenu.vue'
  import GlobalMessageTab from './global/GlobalMessageTab.vue'
  import { useRouter } from 'vue-router'
  import { useMenu } from './composable/useMenu'
  import zh_CN from '../lang/zh_CN'
  import en_US from '../lang/en_US'
  
  import { logout } from "../api/module/user";
  import { layer } from '@layui/layer-vue'

  export default {
    components: {
      GlobalSetup,GlobalContent,GlobalTab,GlobalMenu,GlobalBreadcrumb,GlobalMainMenu,GlobalMessageTab
    },
    setup() {
      const appStore = useAppStore()
      const userInfoStore = useUserStore()
      const fullscreenRef = ref()
      const visible = ref(false)
      const sideWidth = computed(() => appStore.collapse ? '60px' : appStore.subfield && appStore.subfieldPosition == 'side' ? '280px' : '220px')
      const router = useRouter()

      const { selectedKey, openKeys, menus, mainMenus, mainSelectedKey, changeMainSelectedKey, changeSelectedKey, changeOpenKeys } = useMenu()

      onMounted(() => {
        if (document.body.clientWidth < 768) {
          appStore.collapse = true
        }
        userInfoStore.loadMenus()
        userInfoStore.loadPermissions()
      })

      const changeVisible = () => {
        visible.value = !visible.value
      }

      const currentIndex = ref('1')

      const collapse = () => {
        appStore.collapse = !appStore.collapse
      }

      const refresh = () => {
        appStore.routerAlive = false
        setTimeout(function () {
          appStore.routerAlive = true
        }, 500)
      }

      const logOut = () => {
        const userInfoStore = useUserStore()
        
        logout().then(({ data, code, msg }) => {
          if(code == 200){
            userInfoStore.token = '';
            userInfoStore.userInfo = {};
            router.push('/login');
          } else {
            layer.msg(msg, { icon: 2 });
            setTimeout(() => { router.push('/login'); }, 1000)
          }
        })
      }

      const locales = [
        { name: 'zh_CN', locale: zh_CN, merge: true },
        { name: 'en_US', locale: en_US, merge: true }
      ]

      function toUserInfo() {
        router.push('/enrollee/profile')
      }

      function toSystemSet() {
        router.push('/system/menu')
      }

      const flag = ref(false)

      function changeDropdown() {
        flag.value = !flag.value
      }

      return {
        sideWidth,mainSelectedKey,fullscreenRef,appStore,visible,menus,mainMenus,userInfoStore,
        currentIndex,selectedKey,openKeys,collapse,changeOpenKeys,changeSelectedKey,changeMainSelectedKey,
        changeVisible,refresh,logOut,locales,toUserInfo,toSystemSet,changeDropdown,flag
      }
    }
  }
</script>

<style lang="less">
  @media screen and (max-width: 767px) { .layui-side { position: absolute; height: 100vh; } }
  
  /*鼠标经过背景色，增加了improtant，否则设置无效*/ 
  .layui-header .layui-nav-item .layui-icon:hover { background: whitesmoke !important; } 
  
  /*面包屑颜色兼容*/ 
  .layui-header .layui-nav-item .layui-breadcrumb a { color: #999 !important; } 
  .layui-header .layui-nav-item .layui-breadcrumb a:nth-last-child(2) { color: #666 !important; } 
  
  /*图标默认颜色修复，指定 .layui-icon 去掉improtant，否则无法设置图标其他颜色*/ 
  .layui-header .layui-nav-item .layui-icon { color: #666; } 
  
  /*取消默认a标签的padding:0 20px，否则扩大图标后容器变形*/ 
  .layui-header .layui-nav-item>a { padding: 0 !important; }
  /*扩大图标尺寸与所在容器大小一致，默认大小导致鼠标必须点击图标才能触发事件效果*/ 
  .layui-header .layui-nav-item .layui-icon { height: 50px; padding: 20px; } 
  
  /*增加鼠标经过图标时改变图标颜色，颜色为当前系统主题色*/ 
  .layui-header .layui-nav-item .layui-icon:hover { color: var(--global-primary-color) !important; } 
  
  .grey-mode { filter: grayscale(1); } 
  .side-menu-wrapper { width: 100%; overflow-y: auto; height: calc(100% - 52px); display: flex; } 
  .side-menu-wrapper::-webkit-scrollbar { width: 8px; height: 8px; } 
  .side-menu-wrapper::-webkit-scrollbar-thumb { border-radius: 10px; background-color: rgb(40, 51, 62); } 
  
  .light .side-menu-wrapper::-webkit-scrollbar-thumb { background-color: #e2e2e2; } 
  .side-menu1 { width: 60px; flex: 0 0 60px; border-right: 1px solid rgba(0, 0, 0, 0.12); } 
  .light .side-menu1 { border-right: 1px solid whitesmoke; } 
  .side-menu2 { flex: 1; } 
  .changeBgc { background-color: #171717 !important; } 
  .underpainting { .layui-tab-title { 
    .layui-this { 
      color: var(--global-primary-color) !important; border-bottom: 2px solid var(--global-primary-color) !important;background-color: #009b8e0d !important; 
      .layui-icon { color: var(--global-primary-color) !important; } 
    } 
  }}
  .layui-body>.global-tab>.layui-tab>.layui-tab-head>.layui-tab-title>li { height: 38px; line-height: 38px; } 
  .designer { padding-left: 5px; box-sizing: border-box; 
  .layui-tab-head { background-color: unset !important; } 
  .layui-tab-title { background-color: unset !important; >li { background-color: #fff; margin: 5px 0 0 5px; border-radius: 4px; height: 32px !important; line-height: 32px !important; } 
} }
</style>